<template>

  <ServerLogSearch v-model="params" @search="page = 1; showData()"></ServerLogSearch>

  <Table border :columns="columns" :data="data">

    <template #action="{ row, index }">
      <Button type="primary" icon="ios-search" size="small" style="margin-right: 5px"
              @click="this.logRow=row;this.drawer=true">查看
      </Button>
    </template>

    <template #status="{ row, index }">
      <DotTag type="primary" v-if="row.status">成功</DotTag>
      <DotTag type="error" v-else>失败</DotTag>
    </template>

    <template #footer>
      <div style="min-width: 300px; max-width: 380px;">
        <van-pagination v-model="page" :total-items="total"
                        :items-per-page="pageSize" @page-click="showData"
                        :show-page-size="5" force-ellipses />
      </div>
    </template>
  </Table>

  <Drawer
      title="查看"
      v-model="drawer"
      v-if="drawer"
      width="720"
      :mask-closable="false"
      :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">

    <ServerLogDetail :row="logRow"></ServerLogDetail>
    <div class="demo-drawer-footer">
      <Button style="margin-right: 8px" @click="drawer = false">关闭</Button>
    </div>

  </Drawer>

</template>

<script>

import ServerLogDetail from '../components/ServerLogDetail.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue'
import ServerLogSearch from '../components/ServerLogSearch.vue'

export default {
  data() {
    return {
      page: 1,
      total: 0,
      params: {},
      pageSize: 10,
      logRow: {},
      drawer: false,
      columns: [
        {
          title: '日志编号',
          key: 'id'
        },
        {
          title: '操作模块',
          key: 'module'
        },
        {
          title: '请求方式',
          key: 'method'
        },
        {
          title: '操作人员',
          key: 'user'
        },
        {
          title: '操作地址',
          key: 'ip'
        },
        {
          title: '操作地点',
          key: 'address'
        },
        {
          title: '操作系统',
          key: 'osName'
        },
        {
          title: '浏览器',
          key: 'browserName'
        },
        {
          title: '操作时间',
          key: 'createTime',
          width: 200,
        },
        {
          title: '操作状态',
          key: 'status',
          slot: 'status',
          width: 100
        },
        {
          title: '操作地址',
          slot: 'action',
          width: 100,
          align: 'center'
        },
      ],
      data: [],
    }
  },
  created() {
     this.showData();
  },
  methods: {
    show(index) {
      this.drawer = true;
    },
    showData() {
      this.$api.queryServiceLogs(this.page, this.pageSize, this.params).then(({data:ret})=> {
        if (ret.status === "10000") {
          this.data = ret.data.list ;
          this.total = ret.data.total ;
        }
      })
    }
  },
  components: {
    ServerLogDetail,
    DotTag,
    VanPagination,
    ServerLogSearch
  }
}
</script>

<style>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>